<template>
    <div class="main">
       <div class="left" :style="{backgroundColor:themeColor,width:(!isCollapse?'200px':'auto')}"> 
           <div class="logo">VK</div>
           <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"

      @close="handleClose"
      background-color="#101f30"
      text-color="#fff"
      active-text-color="#ffd04b"
      
      :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>账号管理</span>
        </template>
        
          <el-menu-item index="1-1">角色管理</el-menu-item>
          <el-menu-item index="1-2">账号管理</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span>客房管理</span>
        </template>
        
          <el-menu-item index="2-1">类型管理</el-menu-item>
          <el-menu-item index="2-2">客房管理</el-menu-item>
      </el-submenu>
     <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span>客户管理</span>
        </template>
        
          <el-menu-item index="3-1">客户管理</el-menu-item>
          
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>权限管理</span>
        </template>
        
          <el-menu-item index="4-1">权限管理</el-menu-item>
         
      </el-submenu>
    </el-menu>
       </div>
  
    <div class="right">
        <div class="nav">
            <div class="icon">
                <i class="el-icon-s-fold" @click=" isCollapse=! isCollapse"></i>
            </div>
            <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"

  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">Home</el-menu-item>
   <el-menu-item index="2">Message</el-menu-item>
    <el-menu-item index="3">Email</el-menu-item>
  <el-submenu index="4">
    <template slot="title">Theme</template>
   <el-menu-item @click="changeTheme(item.value)" v-for="(item,index) in theme" :key="index">{{item.name}} 
       </el-menu-item>   
  
     </el-submenu>
  <el-submenu index="5">
    <template slot="title">管理员</template>
    <el-menu-item index="5-1">个人中心</el-menu-item>
    <el-menu-item index="5-2">修改密码</el-menu-item>
    <el-menu-item index="5-3" @click="exit">退出系统</el-menu-item>
   </el-submenu>
</el-menu></div>
        <div class='content'>2</div>
    </div>
    </div>
</template>
<script>
//导入vuex的映射函数
import{mapState} from 'vuex'
export default {
     data() {
      return {    
        activeIndex2: '1',
        themeColor:'#101f30',
      //是否折叠左侧菜单
        isCollapse:false
      };
    },
    computed:{
        ...mapState('theme',['theme'])
    },
      methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath); 

      },

      changeTheme(color){

          console.log(color);
      },
       exit(){
           this.$router.push('/')
       }
      },
};
</script>
<style scoped lang="scss">
    .main{
        width: 100vw;
        height: 100vh;
        display: flex;
        .left{
            // width: 200px;
            // background-color: #101f30;
            .logo{
                width: 98%;
                color:white;
                font-size: 18px;
                text-align: center;
                padding: 8px 0;
                border: 1px solid white;
                margin: 10px auto;
            }
        }
        .right{
            flex: 1;
            .nav{
                height: 60px;
                display: flex;
                justify-content: space-between;
                background-color:#101f30 ;
                align-items: center;
                .icon{
                    i{
                        color:white;
                        font-size: 18px;
                    }
                }
            }
        }
    }
      
</style>